import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
    state = {
        type:1
    }
    render() {
        return (
            <div>
                <ul>
                    <li onClick={() => this.setState({ type: 1 })}>正在热映</li>
                    <li onClick={() => this.setState({ type: 2 })}>即将上映</li>
                </ul>
                <FilmsList type={this.state.type}></FilmsList>
            </div>
        )
    }
}
class FilmsList extends Component {
    state={
        list:[]
    }
    // 初始化，只执行一次
    componentDidMount() {
        // console.log(this.props.type);
        if (this.props.type === 1) {
            console.log("请求卖座正在热映的数据");
            axios({
                url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=807784",
                headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'}
            }).then(res=>{
                console.log(res.data.data.films);
                this.setState({
                    list:res.data.data.films
                })
            })
        } else {
            console.log("请求卖座即将上映的数据");
            axios({
                
                url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=2&k=2119891",
                headers: {
                'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'}
            }).then(res=>{
                console.log(res.data.data.films);
                this.setState({
                    list:res.data.data.films
                })
            })
        }
    }
    static getDerivedStateFromProps(nextProps,nextState){
        // console.log("getDerivedStateFromProps",nextState);
        return {
           type:nextProps.type
        }
}
    componentDidUpdate(prevProps,prevState){
        if(this.state.type===prevState.type){
            return
        }
        if (this.state.type === 1) {
                    console.log("请求卖座正在热映的数据");
                    axios({
                        url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=807784",
                        // url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=1&k=2119891",
                        headers: {
                        'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                        'X-Host': 'mall.film-ticket.film.list'}
                    }).then(res=>{
                        console.log(res.data.data.films);
                        this.setState({
                            list:res.data.data.films
                        })
                    })
                } else {
                    console.log("请求卖座即将上映的数据");
                    axios({
                        
                        url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=2&k=2119891",
                        headers: {
                        'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                        'X-Host': 'mall.film-ticket.film.list'}
                    }).then(res=>{
                        console.log(res.data.data.films);
                        this.setState({
                            list:res.data.data.films
                        })
                    })
                }
    }
    // 有风险
    // UNSAFE_componentWillReceiveProps(nextProps) {
    //     if (nextProps.type === 1) {
    //         console.log("请求卖座正在热映的数据");
    //         axios({
    //             url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=807784",
    //             // url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=1&k=2119891",
    //             headers: {
    //             'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
    //             'X-Host': 'mall.film-ticket.film.list'}
    //         }).then(res=>{
    //             console.log(res.data.data.films);
    //             this.setState({
    //                 list:res.data.data.films
    //             })
    //         })
    //     } else {
    //         console.log("请求卖座即将上映的数据");
    //         axios({
                
    //             url:"https://m.maizuo.com/gateway?cityId=810000&pageNum=1&pageSize=10&type=2&k=2119891",
    //             headers: {
    //             'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
    //             'X-Host': 'mall.film-ticket.film.list'}
    //         }).then(res=>{
    //             console.log(res.data.data.films);
    //             this.setState({
    //                 list:res.data.data.films
    //             })
    //         })
    //     }
    // }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.list.map(item=>
                        <li key={item.filmId}>{item.name}</li>    
                        )
                    }
                </ul>
            </div>
        )
    }
}
